<!--
这个文件定义了一个名为 `Header` 的 Vue 组件，用于显示应用的头部导航栏。
组件包含以下部分：
- template: 包含头部导航栏的结构和样式：
  - `header_left`: 显示当前打开的选项卡，遍历 `tabs` 数组生成选项卡元素。
    - 每个选项卡元素显示选项卡名称，并在选项卡数量大于 1 时显示关闭按钮。
    - 点击选项卡时调用 `navigateTo` 方法导航到对应的路由。
    - 点击关闭按钮时调用 `removeTab` 方法移除选项卡。
  - `header_right`: 显示当前用户名和退出按钮。
    - 点击退出按钮时调用 `userStore.logout` 方法登出用户。
- script setup: 使用 Vue 3 的 `<script setup>` 语法，定义了以下内容：
  - 引入 `useUserStore` 和 `useTabStore` 以访问用户和选项卡的状态。
  - 引入 `useRouter` 和 `useRoute` 以访问路由信息。
  - 定义计算属性 `userName` 和 `tabs` 分别获取用户名和选项卡数组。
  - 定义 `navigateTo` 方法用于导航到指定路由。
  - 定义 `removeTab` 方法用于移除指定选项卡。
-->

<template>
    <header class="header">
        <div class="header_left">
            <div v-for="tab in tabs" :key="tab.link" :class="['tab', { active: tab.link === currentRoute.path }]"
                @click="navigateTo(tab.link)">
                {{ tab.name }}
                <span v-if="tabs.length > 1" class="close-tab" @click.stop="removeTab(tab)">
                    <span>×</span>
                </span>
            </div>
        </div>
        <div class="header_right">
            <div class="menu-item">{{ userName }}</div>
            <div class="menu-item" @click="logout">退出</div>
        </div>
    </header>
</template>

<script setup>
import { computed, onMounted } from 'vue'
import { useUserStore } from '@/stores/userStore.js'
import { useTabStore } from '@/stores/tabStore.js'
import { useRouter, useRoute } from 'vue-router'

const userStore = useUserStore()
const tabStore = useTabStore()
const router = useRouter()
const currentRoute = useRoute()

const userName = computed(() => userStore.$state.userName)
const tabs = computed(() => tabStore.tabs)

const navigateTo = (link) => {
    router.push(link)
}

const removeTab = (tab) => {
    tabStore.removeTab(tab)
    if (currentRoute.path === tab.link) {
        const remainingTabs = tabStore.tabs
        if (remainingTabs.length > 0) {
            router.push(remainingTabs[remainingTabs.length - 1].link)
        } else {
            router.push('/')
        }
    }
}

const logout = () => {
    userStore.logout()
    router.push('/Auth/Login')
}

onMounted(() => {
    const currentTab = {
        name: currentRoute.meta.title || currentRoute.name,
        link: currentRoute.path
    }
    tabStore.addTab(currentTab)
})
</script>

<style scoped>
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #ffffff;
    height: 50px;
    line-height: 50px;
}

.menu-item {
    height: 100%;
    padding: 0 20px;
}

.menu-item:hover {
    cursor: pointer;
    background-color: #f3f3f3;
}

.header_left {
    display: flex;
    align-items: center;
}

.header_right {
    display: flex;
    align-items: center;
}

.tab {
    padding: 0 20px;
    cursor: pointer;
    background-color: #ffffff;
    display: flex;
    align-items: center;
}

.tab:hover {
    background-color: #f3f3f3;
}

.tab.active {
    background-color: #f3f3f3;
}

.close-tab {
    margin-left: 8px;
    cursor: pointer;
    font-size: 24px;
}

.close-tab:hover {
    color: red;
}
</style>